import * as React from "react";
import {Button, DatePicker, Form, Input, Select, Spin, Statistic, Table} from "antd";
import {Link} from "react-router-dom";
import IconFont17 from "../../util/autoIcon/correct";
import IconFont16 from "../../util/autoIcon/error";
import API from "../../api/api";
import {config} from "../../util/config";
import managerSubLogList from "../../api/subscribe/managerSubLogList";
const { RangePicker } = DatePicker;
const {Option} = Select;

export default class SubscribeLog extends React.Component{

    constructor(props) {
        super(props);
        this.state={
            current:1,
            spinFlag:false,
            data:[],
            pageSize:10,
            count:null
        }
        let result = API.managerSubLogList();
        this.state.data = result.data;
        this.state.count = result.count;
    }
    /**
     * "SUBSCRIBE_ID": 64.0,
     "SUBSCRIBE_STATUS": "false",
     "SUBSCRIBE_UPDATE_BY": "丁天天(K007-資訊中心)",
     "SUBSCRIBE_UPDATE_TIME": "2021-05-21 14:52:59",
     "SUBSCRIBE_TARGET_ID": 1196.0,
     "SUBSCRIBE_TARGET_TYPE": "article",
     "SUBSCRIBE_TARGET_NAME": "test1"
     * @type {({dataIndex: string, title: string, key: string}|{dataIndex: string, title: string, key: string}|{dataIndex: string, title: string, key: string}|{dataIndex: string, title: string, key: string})[]}
     */

    columns = [
        {
            title: '模塊名稱',
            dataIndex: 'SUBSCRIBE_NAME',
            key: 'name',
            width:400,
            ellipsis:true
            // render:(text,record)=>{
            //     if(record.SUBSCRIBE_TARGET_TYPE=="file-d"){
            //         return <Link to={`/eip/table/file&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="article-d"){
            //         return <Link to={`/eip/table/article&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="article"){
            //         return <Link to={`/eip/file/article/${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="folder"){
            //         return <Link to={`/eip/table/folder&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }
            // }
        },
        {
            title: '模塊ID',
            dataIndex: 'SUBSCRIBE_TARGET_ID',
            key: 'name',
            ellipsis:true,
            width: 180
            // render:(text,record)=>{
            //     if(record.SUBSCRIBE_TARGET_TYPE=="file-d"){
            //         return <Link to={`/eip/table/file&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="article-d"){
            //         return <Link to={`/eip/table/article&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="article"){
            //         return <Link to={`/eip/file/article/${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }else if(record.SUBSCRIBE_TARGET_TYPE=="folder"){
            //         return <Link to={`/eip/table/folder&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
            //     }
            // }
        },
        {
            title: '状态',
            dataIndex: 'SUBSCRIBE_STATUS',
            key: 'address',
            ellipsis:true,
            width: 180,
            render:(text,record)=>{
                if(text=="true"){
                    return <IconFont17 type="icon-icon-test-copy-copy"/>
                }else if(text=="false"){
                    return <IconFont16 type="icon-cuowu"/>
                }
            }
        },
        {
            title: '類型',
            dataIndex: 'SUBSCRIBE_TARGET_TYPE',
            key: 'type',
            ellipsis:true,
            width: 180,
            // width:80,
            render:(text, record)=>{
                return text=="file-d"?"文件庫":text=="article-d"?"文章庫":text=="article"?"文章":text=="folder"?"文件夾":null
            }

        },
        {
            title: '訂閱者',
            dataIndex: 'SUBSCRIBE_USER_NAME',
            key: 'update_by',
            ellipsis:true,
            width:260
        },
        {
            title: '用戶工號',
            dataIndex: 'PERSON_NUM',
            key: 'update_by',
            ellipsis:true,
        },
        {
            title:"時間",
            dataIndex:'SUBSCRIBE_UPDATE_TIME',
            key:'update_date',
            width:200,
            ellipsis:true
        }
    ]

    type = "all";
    status = "all";
    searchKey = "";
    personNo = "";
    startDate = "";
    endDate = "";
    startDate2 = "";
    endDate2 = "";

    onChange=(moment,string)=>{
        this.startDate=string[0];
        this.endDate=string[1];
        // this.getDataByCondition(this.searchKey,this.startDate,this.endDate);
    }

    changeList =(item)=>{
        console.log(item)
    }

    //表单对象
    formRef = React.createRef();

    onReset = () => {
        this.formRef.current.resetFields();
    };

    onFinish=(item)=>{
        if(item.moduleName!=undefined){
            this.searchKey = item.moduleName;
        }
        if(item.personNum!=undefined){
            this.personNo = item.personNum
        }
        if(item.type!=undefined){
            this.type = item.type.value
        }else {
            item.type ={
                value:null
            }
        }
        if(item.status!=undefined){
            this.status = item.status.value
        }else {
            item.status ={
                value:null
            }
        }
        this.startDate2 = this.startDate
        this.endDate2 = this.endDate
        this.setState({spinFlag:true},()=>{
            setTimeout(()=>{
                let result = API.managerSubLogList(item.moduleName,item.type.value,item.personNum,item.status.value,this.startDate,this.endDate,1,this.state.pageSize);
                this.setState({data:result.data,count:result.count,spinFlag:false,current:1})
            },100)
        })
    }

    onChange=(moment,string)=>{
        this.startDate=string[0];
        this.endDate=string[1];
        // this.getDataByCondition(this.searchKey,this.startDate,this.endDate);
    }

    onShowSizeChange(current, pageSize) {
        this.setState({pageSize:pageSize})
        this.changePage(1,pageSize)
    }

    changePage(current,pageSize){
        let searchKey = this.searchKey;
        let type = this.type;
        let status = this.status;
        let personNum = this.personNo;
        let startDate = this.startDate2;
        let endDate = this.endDate2;
        debugger
        let result = API.managerSubLogList(searchKey,type,personNum,status,startDate,endDate,current,pageSize);
        this.setState({data:result.data,count:result.count,current:current});
    }

    paginationProps =_=> {
        const total = this.state.count
        const pageSize = this.state.pageSize
        return {
            current:this.state.current,
            showSizeChanger: true,//设置每页显示数据条数
            showQuickJumper: false,
            // showTotal: () => `共${this.state.count}条`,
            pageSize: pageSize,
            total: total,  //数据的总的条数
            onChange: (current) => this.changePage(current,pageSize), //点击当前页码
            onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
                console.log(pageSize);
                this.onShowSizeChange(current, pageSize)
            }
        }
    }

    render() {
        return(
            <Spin spinning={this.state.spinFlag}>
                <div style={{marginBottom:"1rem" }}>
                    <Form
                        ref={this.formRef}
                        onFinish={this.onFinish}
                        onReset={this.onReset}
                        style={{display:"inline"}}
                        layout={"inline"}
                    >
                        <Form.Item
                            name="accessNum"
                            label="訪問記錄"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            共{this.state.count}筆數據
                        </Form.Item>
                        <Form.Item
                            name="dateBorder"
                            label="時間範圍"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            <RangePicker allowClear showTime style={{ width: 220 }} onChange={this.onChange}/>
                        </Form.Item>
                        <Form.Item
                            name="moduleName"
                            label="模塊名稱"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            <Input allowClear style={{ width: 120 }}/>
                        </Form.Item>
                        <Form.Item
                            name="type"
                            label="類型"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            <Select
                                labelInValue
                                defaultValue={{ value: 'all' }}
                                style={{ width: 120 }}
                            >
                                <Option value="all">所有</Option>
                                <Option value="file-d">{config.file_d}</Option>
                                <Option value="article-d">{config.article_d}</Option>
                                <Option value="folder">{config.folder}</Option>
                                <Option value="article">{config.article}</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="status"
                            label="狀態"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            <Select
                                labelInValue
                                defaultValue={{ value: 'null' }}
                                style={{ width: 120 }}
                            >
                                <Option value="null">所有</Option>
                                <Option value="true">訂閱</Option>
                                <Option value="false">取消訂閱</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name="personNum"
                            label="用戶工號"
                            style={{display:"inline",}}
                        >
                            <Input allowClear style={{ width: 120 }}/>
                        </Form.Item>
                        <Form.Item
                            label="查詢"
                            name="commit"
                            style={{display:"inline",marginBottom:"1rem"}}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table dataSource={this.state.data} columns={this.columns} scroll={{x: '80vw'}} pagination={this.paginationProps()} style={{marginRight:"2rem"}}/>
            </Spin>
        )
    }
}
